<template>
  <div class="reportCon">
    <!-- 滚动区域容器 -->
    <div class="page seventh">
      <img class="pageBanner" :src="nodataBg" />
      <div class="yearDescImg">
        <img :src="yearDescImglocal0" alt="" />
      </div>
      <div class="reportData nodata">
        <p class="ptxt thankn">新的一年</p>
        <p class="ptxt thankn">愿所有的好运都猝不及防</p>
        <p class="ptxt thankn">愿所有的幸福都如期而至</p>
        <div class="btns">
          <img class="btnImg" :src="btnImg0" />
          <img class="btnImg" :src="btnImg1" @click="showShareDialog" />
        </div>
      </div>
      <save-canvas
        :yearDescImglocal="yearDescImglocal0"
        :isShareImg="isShareImg"
        :opacity="opacity"
        @shareDialog="shareDialog"
        @shareDialog1="shareDialog1"
      >
      </save-canvas>
    </div>
  </div>
</template>
<script>
import "@/assets/css/pages/billReport.scss";
import { mapState, mapActions } from "vuex";
export default {
  name: "billReport",
  components: {
    saveCanvas: (resolve) => require(["@/components/saveCanvas"], resolve),
  },

  data() {
    return {
      //上下滑动大背景
      btnImg0: require("@/assets/imgs/btnImg0.png"),
      btnImg1: require("@/assets/imgs/btnImg1.png"),
      nodataBg: require("@/assets/imgs/yearbg.png"),
      isShareImg: false,
      isFullPage: false, //避免空白页
      yearDescImglocal0: require("@/assets/imgs/yearDescImglocal0.png"),
      opacity: 0,
      vheight: "",
    };
  },
  created() {
    let _this = this;
    _this.fixTabBar();
  },
  computed: {},
  mounted() {
    this.vheight = document.body.clientHeight;
  },
  methods: {
    fixTabBar() {
      // iphoneX
      if (this.$splitUrl["isIphoneX"] == "true" && window.innerWidth == 375) {
        $("html").css({
          height: "812px",
        });
        // iphoneXR XS
      } else if (
        this.$splitUrl["isIphoneX"] == "true" &&
        window.innerWidth == 414
      ) {
        $("html").css({
          height: "896px",
        });
        // iPhone 12 mini
      } else if (
        this.$splitUrl["isIphoneX"] == "true" &&
        window.innerWidth == 360
      ) {
        $("html").css({
          height: "780px",
        });
        // iPhone 12
      } else if (
        this.$splitUrl["isIphoneX"] == "true" &&
        window.innerWidth == 390
      ) {
        $("html").css({
          height: "844px",
        });
        // iPhone 12 Pro Max
      } else if (
        this.$splitUrl["isIphoneX"] == "true" &&
        window.innerWidth == 428
      ) {
        $("html").css({
          height: "926px",
        });
        // iphone8p 7p 6sp 6p
      } else if (
        this.$splitUrl["isIphoneX"] == "false" &&
        window.innerWidth == 414
      ) {
        $("html").css({
          height: "736px",
        });
        // iphone8
      } else if (
        this.$splitUrl["isIphoneX"] == "false" &&
        window.innerWidth == 375
      ) {
        $("html").css({
          height: "667px",
        });
        // iphoneSE 5 5S 5C
      } else if (
        this.$splitUrl["isIphoneX"] == "false" &&
        window.innerWidth == 320
      ) {
        $("html").css({
          height: "568px",
        });
      }
    },

    // 晒一晒
    showShareDialog() {
      this.isShareImg = true;
      this.opacity = 1;
    },

    shareDialog(val) {
      this.isShareImg = val;
    },
    shareDialog1(val) {
      this.opacity = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  position: relative;
  .reportData {
    position: absolute;
    top: 60%;
    left: 5%;
    width: 90%;
    text-align: center;

    &.nodata {
      top: 70%;
    }

    .btns {
      position: absolute;
      bottom: -55%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-size: 100%;
      width: 6.5rem;
      margin-top: 15%;

      .btnImg {
        width: 3.1rem;
        height: 0.8rem;
        display: inline-block;
        z-index: 1000;
      }
    }
  }

  .ptxt {
    font-size: 0.36rem;
    letter-spacing: 0.06em;
    font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
    font-weight: 400;
    color: #5d3322;
    line-height: 0.63rem;
    text-align: center;
  }
}

.reportCon {
  height: 100%;
  width: 100%;
  position: relative;
}
</style>
